<template>
  <div class="supplier-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="8">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          添加
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="16">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <!-- <el-form-item>
            <el-select
              v-model="queryForm.supplier_category_id"
              placeholder="请选择供应商分类"
              clearable
              filterable
            >
              <el-option
                v-for="item in supplierCategories"
                :key="item.id"
                :label="item.category_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.keyword"
              placeholder="请输入搜索词"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryForm.is_real"
              placeholder="请选择是否实名认证"
              clearable
            >
              <el-option label="已认证" value="已认证" />
              <el-option label="未认证" value="未认证" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        type="index"
        width="95"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="服务商类别名称"
      >
        <template #default="{ row }">
          {{ row.supplier_category.join(', ') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="supplier_name"
        label="姓名"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="手机号"
      />
     <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="supplier_alias"
        label="供应商别名"
      />-->
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="idcard"
        label="供应商身份证号"
      /> -->
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="bank_card"
        label="供应商银行卡号"
      /> -->
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="bank"
        label="所属银行"
      /> -->
      <el-table-column align="center" label="是否实名认证" >
        <template #default="{ row }">
          <div>{{row.is_real}}<span v-show="row.is_real==='未认证'">
            <el-button
              type="text"
              @click="showChecks(row.id)"
            >
              （补充认证）
            </el-button></span>
            <span v-show="row.is_real==='已认证'">
            <el-button
              type="text"
              @click="showChecks(row.id)"
            >
              （修改认证）
            </el-button></span></div>

        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="is_platform_real_name"
        label="是否平台认证"
      /> -->
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="创建时间"
      /> -->
      <el-table-column align="center" label="操作" width="85" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <edit
      ref="edit"
      :supplier-categories="supplierCategories"
      @fetch-data="fetchData"
    />

    <el-dialog
      title=""
      :visible.sync="checksVisible"
      width="530px"
    >
      <div class="popchecks">
        <div>链接：{{checks.url}}<el-button
          @click="copyTemplate(checks.url)"
          size="mini"
          class="fuzhi"
          type="text">复制
        </el-button></div>

        <el-image class="ewm2" :src="checks.qr" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getList, doDelete } from '@/api/dc_freelancer'
  import { getList as getSupplierCategoryList } from '@/api/supplierCategory'
  import Edit from './components/Edit'
  import {getSupplierQrs} from "@/api/supplier";

  export default {
    name: 'Supplier',
    components: { Edit },
    data() {
      return {
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          page: 1,
          list_row: 10,
          supplier_category_id: '',
          keyword: '',
          is_real: '',
        },
        supplierCategories: [],
        formdata:{
          url:'http://baidu.auth.vink.vip/#/',//'http://192.168.31.188:8080/#/',
          supplier_id:0
        },
        objdata:{
          url:'',
          qr:''
        },
        checksVisible: false,
        checks:{
          url:'',
          qr:''
        }
      }
    },
    created() {
      this.fetchData()
      this.fetchSupplierCategories()
    },
    activated() {
      this.fetchSupplierCategories()
    },
    methods: {
      // 复制模板内容
      copyTemplate(data) {
        this.copyToClipboard(data); // 需要复制的文本内容
        this.$message.success('复制成功！');
      },
      // 点击复制到剪贴板函数
      copyToClipboard(content) {
        if (window.clipboardData) {
          window.clipboardData.setData('text', content);
        } else {
          (function (content) {
            document.oncopy = function (e) {
              e.clipboardData.setData('text', content);
              e.preventDefault();
              document.oncopy = null;
            }
          })(content);
          document.execCommand('Copy');
        }
      },
      showChecks(id) {
        this.formdata.supplier_id = id;
        getSupplierQrs(this.formdata).then((res) => {
          console.log(333,res)
          this.checks.url = res.url
          this.checks.qr = res.qr
          this.checksVisible = true
        })
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ supplier_id: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.page = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data, total } = await getList(this.queryForm)
        this.list = data
        this.total = total
        this.listLoading = false
      },
      async fetchSupplierCategories() {
        const { data } = await getSupplierCategoryList()
        this.supplierCategories = data
      },
    },
  }
</script>
<style lang="scss">
.con-txt{
  width: 250px;
  height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.con-txt2{
  width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ewm{
  width: 80px;
  height: 80px;
}
.ewm2{
  width: 150px;
  height: 150px;
}
.fuzhi{
  padding: 5px 10px;
  background: rgba(24, 144, 255,.08);
}
.popchecks{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
